<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/lib/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>个人信息显示与修改</legend>
</fieldset>
<form class="layui-form" action="" >
  <div class="layui-form-item">
    <label class="layui-form-label">读者编号</label>
    <div class="layui-input-block">
      <input type="text" name="id" disabled="disabled" autocomplete="off" class="layui-input" th:value="${borrower.getId()}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">读者姓名</label>
    <div class="layui-input-block">
      <input type="text" name="name" disabled="disabled" autocomplete="off" class="layui-input" th:value="${borrower.getName()}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">注册日期</label>
    <div class="layui-input-block">
      <input type="text" name="date" disabled="disabled" autocomplete="off" class="layui-input" th:value="${borrower.getRegisterDate()}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-block">
      <input type="text" name="address" lay-verify="required" autocomplete="off" class="layui-input" th:value="${borrower.getAddress()}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">通信电话</label>
    <div class="layui-input-block">
      <input type="text" name="phone" autocomplete="off" lay-verify="phone|required" class="layui-input" th:value="${borrower.getPhoneNum()}">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="update1">修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>邮箱修改</legend>
</fieldset>
<form class="layui-form" action="" >
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="email" lay-verify="email|required" autocomplete="off" class="layui-input" th:value="${borrower.getEmail()}">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="update2">修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>密码修改</legend>
</fieldset>
<form class="layui-form" action="" >
  <div class="layui-form-item">
    <label class="layui-form-label">原密码</label>
    <div class="layui-input-block">
      <input type="password" name="oldPassword" lay-verify="password|required" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="password|required" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="passwordConfirm" lay-verify="password|required" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="update3">修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
  layui.use(['form'], function (){
    var form = layui.form, $ = layui.jquery;
    form.on('submit(update1)', function (data) {
      data = data.field;
      $.ajax({
        url:"/updateBorrowerInfo",
        type:"POST",
        data:data,
        success:function (result){
          if (result.code==200){
            layer.msg("修改成功",{
              icon:6,
              time:500
            });
          }else {layer.msg(result.msg);}
        }
      });
      return false;
    });
    form.on('submit(update2)', function (data) {
      data = data.field;
      $.ajax({
        url:"/updateBorrowerEmail",
        type:"POST",
        data:data,
        success:function (result){
          if (result.code==200){
            layer.msg("修改成功",{
              icon:6,
              time:500
            });
          }else {layer.msg(result.msg);}
        }
      });
      return false;
    });
    form.on('submit(update3)', function (data) {
      data = data.field;
      if (data.password != data.passwordConfirm){
        layer.msg('两次密码不一致');
        return false;
      }
      $.ajax({
        url:"/updateBorrowerPassword",
        type:"POST",
        data:data,
        success:function (result){
          if (result.code==200){
            layer.msg("修改成功",{
              icon:6,
              time:500
            });
          }else {layer.msg(result.msg);}
        }
      });
      return false;
    });
    form.verify({
      password:function (value, item){
        if(!/[0-9a-zA-Z]{6,9}/.test(value)){
          return "密码格式错误";
        }
      },
    })
  })
</script>
</body>
</html>